<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2018/4/17
  Time: 10:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>kafka 监控中心</title>
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/css/rdc.min.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/plugins/GC-ui1.0.0/css/gui.min.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/css/layout-web.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/css/gallary.css">
    <link rel="stylesheet" href="http://localhost:8080/kafka-monitor/static/css/bootstrap.css">

    <script src="http://localhost:8080/kafka-monitor/static/jquery/jquery-1.11.1.js"></script>

    <%--<script type="text/javascript" src="http://localhost:8080/kafka-monitor/static/js/bootstrap.min.js"></script>--%>
    <script type="text/javascript" src="http://localhost:8080/kafka-monitor/static/js/bootstrap.js"></script>


    <style type="text/css">
        table tr:nth-child(even) {
            background: #ccc;
        }

        table tr td {
            text-align: center !important;
        }

        .alert1{
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 100px;
            margin-left: -100px;
            z-index: 99999;
            padding: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    </style>

    <script>
        function formatTime(timeValue) {
            var dateTime = new Date(timeValue);
            var yearValue = dateTime.getFullYear();
            var monthValue = dateTime.getMonth()+1;
            var dayValue = dateTime.getDate();

            var hourValue = dateTime.getHours();
            var minuteValue = dateTime.getMinutes();
            var secondValue = dateTime.getSeconds();
            return yearValue+"-"+monthValue+"-"+dayValue+" "+hourValue+":"+minuteValue+":"+secondValue;
        }
    </script>
</head>

<body>
<div class="ued-container ued-layout-top ui-sortable" data-drag="layout">
    <div class="ued-top ued-top1" id="top1-3">
        <div class="ued-top-inner clearfix ui-edit-set" data-set="change_top"
             style="background: url(http://localhost:8080/kafka-monitor/static/images/banewbg10.jpg) center center / cover no-repeat rgb(0, 0, 0);">
            <div class="ued-top-left f-l">
                <div class="ude-logo-box">
                    <a href="javascript:;">
                        <span class="logowrap ui-edit-set" data-set="change_logo_info" style="width:152px;">
                        <img src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/images/top/ustc_top_logo.png" alt="" class="ued-top-logo">
                        </span>
                        <span class="ued-top-tit ui-edit-set" data-set="change_tit"
                              contenteditable="true">kafka 信息监控</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="ued-container ued-layout-middle">
    <div class="ued-side ued-layout-side ui-sortable" data-drag="layout" style="top: 81px; bottom: 0px;">
        <div class="side-nav-wrap JS-scroll" id="side-nav1-2">
            <ul class="ued-nav-custom">
                <li class="ued-menu-list">
                    <a href="javascript:void(0)"><i class="ued-ico ued-ico-jz"></i> <span>集中监控</span></a>
                    <ul class="ued-sub-menu-list">
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getTopicList"> topic 列表展示</a></li>
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getAllMonitorInfo">概况监控</a></li>
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getBrokerInfo">Broker 节点监控</a></li>
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getTopicMetadataInfo">topic 元数据监控</a></li>
                    </ul>
                </li>
                <li class="ued-menu-list">
                    <a href="javascript:void(0)"><i class="ued-ico ued-ico-dkh"></i> <span>topic 操作中心</span></a>
                    <ul class="ued-sub-menu-list">
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/searchTopic"> topic 查询中心</a></li>
                        <li><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/createTopic"> 增加主题</a></li>
                    </ul>
                </li>
                <li class="ued-menu-list ued-nav-active">
                    <a href="javascript:void(0)"><i class="ued-ico ued-ico-sjzh"></i> <span> 配置文件管理</span></a>
                    <ul class="ued-sub-menu-list">
                        <li class="active"><a href="http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getConfigFileList"> 配置文件展示</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="ued-main ued-layout-main" style="top: 81px; bottom: 0px;">

        <div style="margin-top: 16px;">
            <form action="http://localhost:8080/kafka-monitor/fileUploadDownload/upload" method="post" enctype="multipart/form-data">
                &nbsp;&nbsp;文件上传：
                <input type="file" name="file">
                <input type="submit" value="提交">
            </form>
        </div>

        <%--配置文件 管理--%>
        <div id="tab1">
            <div class="alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Warning!</strong> 当前是配置文件管理 页面！
            </div>
            <div class="ued-layout-main-scroll ui-sortable" data-drag="layout">
                <table class="table table-bordered">
                    <thead style="color: #00aeff;">
                    <tr>
                        <td style="font-weight: bolder;font-size: 18px;">id</td>
                        <td style="font-weight: bolder;font-size: 18px;">文件名</td>
                        <td style="font-weight: bolder;font-size: 18px;">上传时间</td>
                        <td style="font-weight: bolder;font-size: 18px;">操作</td>
                    </tr>
                    </thead>

                    <tbody id="kafkaConfigFileBody">
                    <c:forEach items="${kafkaConfigFileList}" var="kafkaConfigFile">
                        <tr>
                            <td>${kafkaConfigFile.id}</td>
                            <td>${kafkaConfigFile.configFileName}</td>
                            <td>
                                <script>
                                    var dateTime = formatTime(${kafkaConfigFile.createTime});
                                    document.write(dateTime);
                                </script>
                            </td>
                            <td>
                                <a href="javascript:seeFile('${kafkaConfigFile.id}','${kafkaConfigFile.configFileName}')">查看</a>
                                &nbsp;&nbsp;
                                <a href="http://localhost:8080/kafka-monitor/fileUploadDownload/download?id=${kafkaConfigFile.id}">下载</a>
                                &nbsp;&nbsp;
                                <a href = "javascript:deleteConfigFile('${kafkaConfigFile.id}')">删除</a>
                            </td>

                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div id="promptDiv" class="alert1"></div>

</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="seeFileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true" style="display:none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">

                </h4>
            </div>
            <div class="modal-body" id="seeFileBody">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->

<%--<script src="http://localhost:8080/kafka-monitor/static/plugins/jquery-1.10.2.min.js"></script>--%>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/js/rdc.min.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GC-ui1.0.0/gui.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/numberRun/num.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/goalProgress.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/nicescroll/jquery.nicescroll.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/plugins/GUI-3.0.0/plugins/jquery.select.js"></script>
<script src="http://localhost:8080/kafka-monitor/static/js/gallary.js"></script>

<script type="text/javascript">
    function deleteConfigFile(id) {
        $.ajax({
            url : "http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/deleteConfigFile",
            type : 'post',
            async : false,
            data : {id:id},
            success : function(data) {
                success_prompt("删除成功！");
                setTimeout(function(){
                    window.location.href = "http://localhost:8080/kafka-monitor/getKafkaMonitorInfo/getConfigFileList";
                },1600);
            }
        });
    }

    function seeFile(id,name) {
        $.ajax({
            url : "http://localhost:8080/kafka-monitor/fileUploadDownload/seeFile",
            type : 'post',
            async : false,
            data : {id:id},
            success : function(data) {

                var re1 = new RegExp("\n","g");
                var re2 = new RegExp("\t","g");
                var re3 = new RegExp(" ","g");

                data = data.replace(re1,"<br>");
                data = data.replace(re2,"&nbsp;&nbsp;&nbsp;&nbsp;");
                data = data.replace(re3,"&nbsp;&nbsp;");

                $("#myModalLabel").html(name);
                $("#seeFileBody").html(data);
                $("#seeFileModal").show();
                $("#seeFileModal").modal("show");
//                alert(data);
            }
        });
    }

    /**
     * 弹出框 提示框，默认 1.2 秒 自动消失
     * @param message  提示信息
     * @param style  提示样式，有 alert-success 、alert-danger 、alert-warning 、alert-info
     * @param time  消失时间
     */
    var prompt = function (message, style, time) {
        style = (style == undefined) ? 'alert-success' : style;
        time = (time == undefined) ? 1200 : time;
        $("#promptDiv").appendTo('body')
            .addClass('alert1 ' + style)
            .html(message).show().delay(time).fadeOut();
    };

    // 成功提示
    var success_prompt = function (message, time) {
        prompt(message,'alert-success',time)
    }

    // 失败提示
    var fail_prompt = function (message, time) {
        prompt(message,'alert-danger',time)
    }

    // 提醒
    var warning_prompt = function (message, time) {
        prompt(message,'alert-warning',time)
    }

    // 信息提示
    var info_prompt = function (message, time) {
        prompt(message,'alert-info',time)
    }


</script>
</div>
</body>
</html>
